<template>
  <div class="model-1-container">
    <div class="top-content"></div>
    <div class="model-main-content">
      <div class="model-item">
        12321
      </div>
      <div class="model-item">
        ewqewq
      </div>
      <div class="model-item">
        <span class="h-bg"></span>
      </div>
      <div class="model-item">
        <span class="v-bg"></span>
      </div>
      <div class="model-item">
        654
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Layout',
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
  .model-1-container{
    min-height: 100vh;
    background-color: #AFE2E8;
    width: rem(750);
    margin: auto;
    .top-content{
      background: url('~@/formgen/model/img/model-1/top-bg.png') no-repeat center;
      background-size: contain;
      height: rem(851);
    }
    .model-main-content{
      padding: 0 rem(20);
      .model-item{
        border: rem(20) solid #63B2CD;
        border-radius: rem(40);
        padding: rem(30);
        margin-bottom: rem(50);
        position: relative;
        &.h-bg{

          background: url('~@/formgen/model/img/model-1/model-h-bg.png') no-repeat;
          background-size: contain;
          background-repeat-x: repeat;
          background-position-y: -17px;
        }
      }
    }
  }
</style>
